<template>
  <div>
    <demoLayout
      :title="showInfo.title"
      @titleChange="titleChange"
      :btnList="showInfo.btnList"
      :nowRoute="nowRoute"
    ></demoLayout>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";
import demoLayout from "@/components/public/layout_demo.vue";
import demoroute from "@/assets/json/demoRoutes.json";
import { onBeforeRouteUpdate } from "vue-router";
import router from "@/router";
import { useRoute } from "vue-router";

const nowRoute: string = useRoute().fullPath;

interface btnType {
  key: string;
  name: string;
  url: string;
  icon?: string;
  children?: Array<btnType>;
}

interface showInfoType {
  title: string;
  btnList: Array<btnType>;
}

const defaultBtnList = reactive<Array<btnType>>(demoroute);

const defaultnfo = {
  title: "",
  btnList: defaultBtnList,
};

const showInfo = reactive<showInfoType>(defaultnfo);

const titleChange = (arr: string): void => {
  showInfo.title = arr;
};

// onBeforeRouteUpdate((to, from, next) => {
//   console.log("-------second enter route start-------");
//   console.log(to);
//   console.log(from);
//   console.log("-------second enter route end-------");
//   next();
// });

// watch(
//   () => router.currentRoute.value,
//   (newValue, oldValue) => {
//     console.log("-------route changes by watch start-------");
//     console.log(newValue);
//     console.log(oldValue);
//     console.log("-------route changes by watch end-------");
//   }
// );
</script>

<style scoped></style>
